<template>
    <div>
        <div class="title"><h1>毕业生信息</h1></div>
        
        <div class="list" style="margin-top: 20px">
            <span>毕业生信息列表：</span>
            <el-table :data="graduateData" border style="width: 100%">
                <el-table-column prop="studentId" label="学生ID" width="180"/>
                <el-table-column prop="studentName" label="姓名"/>
                <el-table-column prop="major" label="专业"/>
                <el-table-column prop="graduationStatus" label="毕业状态"/>
                <el-table-column label="备注" width="200">
                    <template #default="scope">
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {ElTable, ElTableColumn} from 'element-plus';

const graduateData = ref([
    {
        studentId: '8209220101',
        studentName: '马小双',
        major: '软件工程',
        graduationStatus: '已毕业'
    },
    {
        studentId: '8209220102',
        studentName: '吴军',
        major: '软件工程',
        graduationStatus: '已毕业'
    },
    {
        studentId: '8209220108',
        studentName: '柯毕',
        major: '软件工程',
        graduationStatus: '未毕业'
    }
    // 可以添加更多模拟毕业生数据
]);


</script>

<style scoped>
.title {
    font-size: 20px;
    margin-bottom: 10px;
}

.option {
    margin-bottom: 20px;
}
</style>